          @breakpoint-xlarge: 1220px;
          @breakpoint-large: 960px;
          @breakpoint-medium: 768px;
          @breakpoint-small: 480px;
          @breakpoint-mini-max: (@breakpoint-small - 1);
          @breakpoint-small-max: (@breakpoint-medium - 1);
          @breakpoint-medium-max: (@breakpoint-large - 1);
          @breakpoint-large-max: (@breakpoint-xlarge - 1);
          /* Desktop and bigger */

          @media (min-width: @breakpoint-large) {
            .hidden-large {
              display: none !important;
            }
          }
          /* Tablets portrait */

          @media (min-width: @breakpoint-medium) and (max-width: @breakpoint-medium-max) {
            .hidden-medium {
              display: none !important;
            }
          }
          /* Phone landscape and smaller*/

          @media (max-width: @breakpoint-small-max) {
            .hidden-small {
              display: none !important;
            }
          }

          .grid {
            padding: 0;
            margin: 0;
            list-style: none;
            &:before, &:after {
              content: '';
              display: block;
              overflow: hidden;
            }
            &:after {
              clear: both;
            }
            &>* {
              float: left;
            }
          }

          .grid {
            margin-left: -25px;
            &>* {
              padding-left: 25px;
            }
          }

          .grid+.grid {
            margin-top: 25px;
          }

          @media(min-width:@breakpoint-xlarge) {
            .grid {
              margin-left: -35px;
            }
            .grid > * {
              padding-left: 35px;
            }
            .grid+.grid {
              margin-top: 35px;
            }
          }

          .grid-collapse {
            margin-left: 0;
            &>* {
              padding-left: 0;
            }
          }

          .grid-collapse + .grid-collapse {
            margin-top: 0;
          }

          .grid-small {
            margin-left: -10px;
            &>* {
              padding-left: 10px;
            }
          }

          .grid-small + .grid-small {
            margin-top: 10px;
          }

          .grid-medium {
            margin-left: -25px;
            &>* {
              padding-left: 25px;
            }
          }

          .grid-medium+.grid-medium {
            margin-top: 25px;
          }

          @media(min-width: @breakpoint-large) {
            .grid-large {
              margin-left: -35px;
              &>* {
                padding-left: 35px;
              }
              &+.grid-large {
                margin-top: 35px;
              }
            }
          }

          @media(min-width: @breakpoint-xlarge) {
            .grid-large {
              margin-left: -50px;
              &>* {
                padding-left: 50px;
              }
              &+.grid-large {
                margin-top: 50px;
              }
            }
          }

          [class*=grid-width] > * {
            box-sizing: border-box;
            width: 100%;
          }

          .grid-width-1-2 > * {
            width: 50%;
          }

          .grid-width-1-3 > * {
            width: 33.333%;
          }

          .grid-width-1-4 > * {
            width: 25%;
          }

          .grid-width-1-5 > * {
            width: 20%;
          }

          .grid-width-1-6 > * {
            width: 16.666%;
          }

          .grid-width-1-7 > * {
            width: 14.286%;
          }

          .grid-width-1-10 > * {
            width: 10%;
          }

          .grid-width-1-12 > * {
            width: 8.333%;
          }
          @media(min-width:@breakpoint-medium){
            .grid-width-medium-1-1>*{
              width: 100%;
            }
            .grid-width-medium-1-4>*{
              width: 25%;
            }
            .grid-width-medium-1-5>*{
              width: 20%;
            }
          }
          @media(min-width:@breakpoint-large){
            .grid-width-large-1-2>*{
              width:50%;
            }
             .grid-width-large-1-5>*{
              width: 20%;
            }
          }
           @media(min-width:@breakpoint-xlarge){
            .grid-width-xlarge-1-2>*{
              width:50%;
            }
             .grid-width-xlarge-1-5>*{
              width: 20%;
            }
          }
          [class *=width] {
            box-sizing: border-box;
            width: 100%;
          }

          .width-1-1 {
            width: 100%;
          }

          .width-1-2, .width-2-4, .width-3-6, .width-5-10 {
            width: 50%;
          }

          .width-1-3, .width-2-6 {
            width: 33.333%;
          }

          .width-2-3, .width-4-6 {
            width: 66.666%;
          }

          .width-1-4 {
            width: 25%;
          }

          .width-3-4 {
            width: 75%;
          }

          .width-1-5, .width-2-10 {
            width: 20%;
          }

          .width-2-5, .width-4-10 {
            width: 40%;
          }

          .width-3-5, .width-6-10 {
            width: 60%;
          }

          .width-4-5, .width-8-10 {
            width: 80%;
          }

          .width-1-6 {
            width: 16.666%;
          }

          .width-5-6 {
            width: 83.333%;
          }

          .width-1-10 {
            width: 10%;
          }

          .width-3-10 {
            width: 30%;
          }

          .width-7-10 {
            width: 70%;
          }

          .width-9-10 {
            width: 90%;
          }

          .width-15-100 {
            width: 15.83%;
          }
          .width-85-100 {
            width: 84.17%;
          }
          .width-17-100 {
            width: 17.5%;
          }
          .width-31-100{
            width:31.55%;
          }
          .width-69-100{
            width:68.45%;
          }
          .width-57-100{
            width:62.66%;
          }
          .width-43-100{
            width:37.34%;
          }
          @media (min-width:@breakpoint-small) {
            .width-small-1-1 {
              width: 100%;
            }
            .width-small-1-2, .width-small-2-4, .width-small-3-6, .width-small-5-10 {
              width: 50%;
            }
            .width-small-1-3, .width-small-2-6 {
              width: 33.333%;
            }
            .width-small-2-3, .width-small-4-6 {
              width: 66.666%;
            }
            .width-small-1-4 {
              width: 25%;
            }
            .width-small-3-4 {
              width: 75%;
            }
            .width-small-1-5, .width-small-2-10 {
              width: 20%;
            }
            .width-small-2-5, .width-small-4-10 {
              width: 40%;
            }
            .width-small-3-5, .width-small-6-10 {
              width: 60%;
            }
            .width-small-4-5, .width-small-8-10 {
              width: 80%;
            }
            .width-small-1-6 {
              width: 16.666%;
            }
            .width-small-5-6 {
              width: 83.333%;
            }
            .width-small-1-10 {
              width: 10%;
            }
            .width-small-3-10 {
              width: 30%;
            }
            .width-small-7-10 {
              width: 70%;
            }
            .width-small-9-10 {
              width: 90%;
            }
          }

          @media (min-width:@breakpoint-medium) {
            .width-medium-1-1 {
              width: 100%;
            }
            .width-medium-1-2, .width-medium-2-4, .width-medium-3-6, .width-medium-5-10 {
              width: 50%;
            }
            .width-medium-1-3, .width-medium-2-6 {
              width: 33.333%;
            }
            .width-medium-2-3, .width-medium-4-6 {
              width: 66.666%;
            }
            .width-medium-1-4 {
              width: 25%;
            }
            .width-medium-3-4 {
              width: 75%;
            }
            .width-medium-1-5, .width-medium-2-10 {
              width: 20%;
            }
            .width-medium-2-5, .width-medium-4-10 {
              width: 40%;
            }
            .width-medium-3-5, .width-medium-6-10 {
              width: 60%;
            }
            .width-medium-4-5, .width-medium-8-10 {
              width: 80%;
            }
            .width-medium-1-6 {
              width: 16.666%;
            }
            .width-medium-5-6 {
              width: 83.333%;
            }
            .width-medium-1-10 {
              width: 10%;
            }
            .width-medium-3-10 {
              width: 30%;
            }
            .width-medium-7-10 {
              width: 70%;
            }
            .width-medium-9-10 {
              width: 90%;
            }
            .width-medium-19-100 {
              width: 19.79%;
            }
            .width-medium-81-100 {
              width: 80.21%;
            }
          }

          .red {
            background: red;
          }

          .yellow {
            background: yellow;
          }

          .blue {
            background: blue;
          }

          .width-45-100 {
            width: 45%;
          }

          .width-55-100 {
            width: 55%;
          }

          @media(min-width:@breakpoint-large) {
            .width-large-1-1 {
              width: 100%;
            }
            .width-large-1-2, .width-large-2-4, .width-large-3-6, .width-large-5-10 {
              width: 50%;
            }
            .width-large-1-3, .width-large-2-6 {
              width: 33.333%;
            }
            .width-large-2-3, .width-large-4-6 {
              width: 66.666%;
            }
            .width-large-1-4 {
              width: 25%;
            }
            .width-large-3-4 {
              width: 75%;
            }
            .width-large-1-5, .width-large-2-10 {
              width: 20%;
            }
            .width-large-2-5, .width-large-4-10 {
              width: 40%;
            }
            .width-large-3-5, .width-large-6-10 {
              width: 60%;
            }
            .width-large-4-5, .width-large-8-10 {
              width: 80%;
            }
            .width-large-1-6 {
              width: 16.666%;
            }
            .width-large-5-6 {
              width: 83.333%;
            }
            .width-large-1-10 {
              width: 10%;
            }
            .width-large-3-10 {
              width: 30%;
            }
            .width-large-7-10 {
              width: 70%;
            }
            .width-large-9-10 {
              width: 90%;
            }
            .width-large-16-100 {
              width: 15.83%;
            }
            .width-large-15-100{
              width: 15.13%;
            }
            .width-large-85-100 {
              width: 84.17%;
            }
            .width-large-17-100 {
                width: 17.5%;
              }
          }

          @media(min-width:@breakpoint-xlarge) {
            .width-xlarge-1-1 {
              width: 100%;
            }
            .width-xlarge-1-2, .width-xlarge-2-4, .width-xlarge-3-6, .width-xlarge-5-10 {
              width: 50%;
            }
            .width-xlarge-1-3, .width-xlarge-2-6 {
              width: 33.333%;
            }
            .width-xlarge-2-3, .width-xlarge-4-6 {
              width: 66.666%;
            }
            .width-xlarge-1-4 {
              width: 25%;
            }
            .width-xlarge-3-4 {
              width: 75%;
            }
            .width-xlarge-1-5, .width-xlarge-2-10 {
              width: 20%;
            }
            .width-xlarge-2-5, .width-xlarge-4-10 {
              width: 40%;
            }
            .width-xlarge-3-5, .width-xlarge-6-10 {
              width: 60%;
            }
            .width-xlarge-4-5, .width-xlarge-8-10 {
              width: 80%;
            }
            .width-xlarge-1-6 {
              width: 16.666%;
            }
            .width-xlarge-5-6 {
              width: 83.333%;
            }
            .width-xlarge-1-10 {
              width: 10%;
            }
            .width-xlarge-3-10 {
              width: 30%;
            }
            .width-xlarge-7-10 {
              width: 70%;
            }
            .width-xlarge-9-10 {
              width: 90%;
            }
          }
